<template>
    <div class="lc-avatar">
        <!-- src不为空则渲染头像图片 -->
        <el-avatar v-if="src" shape="square" :src="src" :size="size"/>
        <!-- 用户默认头像 -->
        <el-avatar v-if="type === 'user' && !src" shape="square" :size="size">
            <el-icon :size="iconSize"><UserFilled/></el-icon>
        </el-avatar>
        <!-- 群组默认头像 -->
        <el-avatar v-if="type === 'group' && !src" shape="square" :size="size">
            <el-icon :size="iconSize"><Grid/></el-icon>
        </el-avatar>
    </div>
</template>

<script setup>
import { defineProps,ref,computed } from 'vue'
import { UserFilled,Grid } from '@element-plus/icons-vue'
const props = defineProps({
    // 头像图片地址
    src:{
        type:String,
        default:''
    },
    // 头像大小
    size:{
        type:Number,
        default:20
    },
    // 类型：user-用户，group-群组
    type:{
        type:String,
        default:'user'
    }
})
const iconSize = computed(() => {
    return 0.85 * props.size
})

</script>

<style scoped lang="scss">
.lc-avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    & > .el-avatar{
        --el-avatar-bg-color:#83B7F7;
        & > .el-icon{
            color: #fff;
        }
    }
}

</style>